<template>
  <el-form label-position="top" class="bold-label form-border">
    <el-form-item label="加入的社区">
      <joined-list :communities="communities" :loading="loading" />
      <el-pagination
        class="flex m-t-10 align-items-center"
        layout="prev, pager, next"
        hide-on-single-page
        :current-page="curPage"
        :page-count="pageCount"
        @current-change="selectedPage"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { formatCommunities } from '@/components/communities/format';
import JoinedList from './list';

export default {
  name: 'SpacesSettingsJoinedCommunities',
  components: { JoinedList },
  data() {
    return {
      communities: [],
      loading: false,
      curPage: 1,
      pageCount: 1,
    };
  },
  methods: {
    // 加载本空间加入的社区
    loadJoinedCommunities() {
      this.loading = true;
      this.$api.spaces.joinedCommunities({
        spaceId: this.$route.params.spaceId,
        page: this.curPage,
      }).then((res) => {
        this.communities = formatCommunities(res.data);
        this.curPage = res.kaminari.current_page;
        this.pageCount = res.kaminari.total_pages;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 页面跳转！
    selectedPage(page) { this.curPage = page; },
  },
  watch: {
    curPage() { this.loadJoinedCommunities(); },
  },
};
</script>

<style></style>
